<style lang='scss' scoped>
	.search_result {
		header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			z-index: 1;

			.top {
				display: flex;
				align-items: center;

				.button {
					flex: 1;
				}
			}
		}

		.nav {
			display: flex;
			justify-content: space-between;

			text {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				font-weight: 900;
			}

			.active {
				color: #5dcb91;
				border-bottom: 5rpx solid #5dcb91;
			}
		}

		.arrow {
			margin-top: 150rpx;

			text {
				font-size: 30rpx;
				font-weight: 900;
			}
		}
	}
</style>
<template>
	<view class='search_result'>
		<header>
			<div class="top">
				<text @click="$router.back()">返回</text>
				<SearchBtn class="button"></SearchBtn>
			</div>
			<view class="nav">
				<text :class="{active:navtab == 'course'}" @click="handeltab('course')">课程</text>
				<text :class="{active:navtab == 'column'}" @click="handeltab('column')">专栏</text>
			</view>
		</header>
		<view class="arrow">
			<text v-if="search.length == 0">鸡毛没见</text>
			<MyList v-else :list="search"></MyList>
		</view>
	</view>
</template>

<script>
	import {
		api
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				inputVal: '',
				navtab: "course", //course column
				search: [],
				page: 1,
				count: 0
			}
		},
		onLoad(o) {
			this.inputVal = o.val
		},
		onShow(o) {
			this.getlist()
			this.search = []
		},
		methods: {
			async getlist() {
				const response = await api({
					url: `search?keyword=${this.inputVal}&page=${this.page}&type=${this.navtab}`,
					method: 'GET'
				})
				if (response.code === 20000) {
					const {
						rows,
						count
					} = response.data
					this.search = [...this.search, ...rows]
					this.count = count
				}
			},
			handeltab(val) {
				this.navtab = val
				this.getlist()
				this.search = []
			},
			onReachBottom() {
				if (this.search.length > this.count) {
					uni.showToast({
						title: "没有了",
						icon: "none"
					})
				} else {
					this.count++
					this.getlist()
				}
			}
		}
	}
</script>
